<template>
  <div class="base-panels">
    <Row type="flex">
      <Col flex="800px"> <h2 class="title2">单位工程 <i>{{ config.page.total }}</i></h2></Col>
      <Col flex="350px">
        <Row :gutter="[12, 8]">
          <Col :span="18">
            <Input v-model:value="config.params.singleName" placeholder="请输入单位工程名称" />
          </Col>
          <Col :span="6" class="text-right">
            <Button type="primary" @click=" changeHandler({current: 1}, config)">查询</Button>
          </Col>
        </Row>
      </Col>
    </Row>
    <Table
        :columns="config.columns"
        :row-key="record => record.singleId"
        :data-source="config.list"
        :pagination="config.page"
        :loading="config.loading"
        @change="(pagination)=> changeHandler(pagination, config)"
        bordered
    >
      <template #indexSlot="{ index }">{{(config.page.current-1)*10+index+1}}</template>
      <template #name="{ text, record }">
        <router-link target="_blank" :to="{ path: `/monomer/${record.singleId}` }" class="blue" >
          {{ text }}
        </router-link>
      </template>
    </Table>
  </div>

</template>

<script lang="ts">
import {defineComponent, inject, onMounted, reactive,  toRefs} from 'vue';
import {Row, Col, Table, Input, Button } from 'ant-design-vue';
import { parseTime } from '/@/utils';
import {getProjectSingleApi} from "/@/api/pro";

const columns = [
  { title: '序号', dataIndex: 'index', width: 70, align: 'center', slots: ({ customRender: 'indexSlot' }) },
  { title: '单体名称', dataIndex: 'singleName', width: 220,slots: ({ customRender: 'name' }) },
  { title: '单体编码', dataIndex: 'singleCode', width: 240 },
  { title: '工程专业类别', dataIndex: 'singleTechMajor', width: 150 },
  { title: '工程量化指标', dataIndex: 'singleContent' },
]

export default defineComponent({
  components: {
    Table , Row, Col, Input, Button
  },
  setup() {
    const projectId = inject('projectId') as string;

    const config = reactive({
      columns: columns,
      list: [],
      loading: false,
      page: {
        total: 0,
        current: 1
      },
      params:{
        singleName:''
      }
    })



    const changeHandler = (pagination, config) => {
      const { current } = pagination;
      let { loading, list, page } = toRefs(config);
      let { singleName } = config.params;
      loading.value = true;
      getProjectSingleApi( { projectId, current , singleName }).then( ({data,success}) => {
        if(success){
          let { records, current, total } = data;
          list.value = records;
          loading.value = false;
          page.value = {current, total};
        }
      })
    }



    const init = () => {
      changeHandler({current: 1}, config);


    }

    onMounted(init)

    return {
      config, changeHandler , parseTime
    }
  },
})
</script>

<style lang="less" scoped>

.ant-col{
  padding-top: 16px;
  margin-bottom: 8px;
}

.ant-select ,.ant-btn{
  width: 100%;
}

.ant-col.text-right{
  padding-right: 0 !important;
}

</style>
